<template>
  <view
    class="cu-modal bottom-modal"
    :class="{ show: showInAuth }"
    @tap="closeAuthModal"
    style="z-index: 10080"
  >
    <view
      class="login-wrap cu-dialog form-wrap safe-area-inset-bottom"
      @tap.stop
      style="border-radius: 20rpx 20rpx 0 0"
    >
      <!-- 1.账号密码登录 -->
      <view v-if="authType === 'accountLogin'">
        <!-- 标题 -->
        <view class="head-box u-m-b-60 u-flex-col">
          <view class="u-flex u-m-b-20">
            <view class="head-title head-title-animation">账号登录</view>
            <view
              class="head-title-active head-title-line"
              @tap="showAuthModal('smsLogin')"
            >
              短信验证
            </view>
          </view>
          <view class="head-subtitle">
            <!-- 如果未设置过密码，请点击忘记密码 -->
          </view>
        </view>
        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'account-login' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon phone"> </view>
              <!-- <img src="@/static/images/phone-0.png" alt="" /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              placeholder="请输入账号"
              @focus="onFocus($event, 'account-login')"
              @blur="checkValue($event, 'account', true)"
              @input="checkValue($event, 'account')"
              :placeholderStyle="placeholderStyle"
              v-model="form['accountLogin'].data.account"
              type="text"
            ></u-input>
            <!-- <button
              class="u-reset-button forgot-btn"
              @tap="showAuthModal('forgotPwd')"
            >
              忘记密码
            </button> -->
          </view>
          <view class="message-error">
            {{ form['accountLogin'].error.account || '' }}
          </view>
        </view>
        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'account-password' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon lock"> </view>

              <!-- <img
                class="title-icon lock"
                src="@/static/images/lock-0.png"
                alt=""
              /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              placeholder="请输入密码"
              :placeholderStyle="placeholderStyle"
              v-model="form['accountLogin'].data.password"
              type="password"
              @focus="onFocus($event, 'account-password')"
              @blur="checkValue($event, 'password', true)"
              @input="checkValue($event, 'password')"
            ></u-input>
            <!-- <button
              class="u-reset-button login-btn-start"
              @tap="accountLoginSubmit"
            >
              登录
            </button> -->
          </view>
          <view class="message-error">
            {{ form['accountLogin'].error.password || '' }}
          </view>
        </view>
        <view class="operate">
          <button
            class="u-reset-button operate-btn"
            @tap="showAuthModal('forgotPwd')"
          >
            忘记密码?
          </button>
          <button
            class="u-reset-button operate-btn"
            @tap="showAuthModal('register')"
          >
            立即注册
          </button>
        </view>
        <button class="u-reset-button login-large" @tap="accountLoginSubmit">
          登录
        </button>
      </view>

      <!-- 2.短信登录 -->
      <view v-if="authType === 'smsLogin'">
        <view class="head-box u-m-b-60">
          <view class="u-flex u-m-b-20">
            <view
              class="head-title-active"
              @tap="showAuthModal('accountLogin')"
            >
              账号登录
            </view>
            <view class="head-title head-title-line head-title-animation">
              短信验证
            </view>
          </view>
          <view class="head-subtitle">
            <!-- 未注册手机号请先点击下方立即注册 -->
          </view>
        </view>
        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'mobile-login' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon phone"> </view>

              <!-- <img
                class="title-icon phone"
                src="@/static/images/phone-0.png"
                alt=""
            /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              placeholder="请输入手机号"
              @focus="onFocus($event, 'mobile-login')"
              @blur="checkValue($event, 'mobile', true)"
              @input="mobileInput($event, 'mobile')"
              :placeholderStyle="placeholderStyle"
              v-model="form['smsLogin'].data.mobile"
              type="number"
            ></u-input>
          </view>
          <view class="message-error">{{
            form['smsLogin'].error.mobile || ''
          }}</view>
        </view>
        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'code-login' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon mail"> </view>

              <!-- <img
                class="title-icon mail"
                src="@/static/images/mail-0.png"
                alt=""
            /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              @focus="onFocus($event, 'code-login')"
              @blur="checkValue($event, 'code', true)"
              @input="checkValue($event, 'code')"
              placeholder="请输入验证码"
              :placeholderStyle="placeholderStyle"
              v-model="form['smsLogin'].data.code"
              type="number"
            ></u-input>

            <button
              class="u-reset-button code-btn code-btn-start code-btn-new"
              :disabled="!form['smsLogin'].data.isMobileEnd"
              :class="{ 'code-btn-end': form['smsLogin'].data.isMobileEnd }"
              @tap="getSmsCode('login')"
            >
              {{ codeText }}
            </button>

            <!-- <button
              class="u-reset-button login-btn-start"
              @tap="smsLoginSubmit"
            >
              登录
            </button> -->
          </view>
          <view class="message-error">{{
            form['smsLogin'].error.code || ''
          }}</view>
        </view>

        <view class="operate">
          <button
            class="u-reset-button operate-btn"
            @tap="showAuthModal('forgotPwd')"
          >
            忘记密码?
          </button>
          <button
            class="u-reset-button operate-btn"
            @tap="showAuthModal('register')"
          >
            立即注册
          </button>
        </view>

        <!-- <button
          class="u-reset-button type-btn"
          @tap="showAuthModal('register')"
        >
          立即注册
        </button> -->
        <button class="u-reset-button login-large" @tap="smsLoginSubmit">
          登录
        </button>
      </view>

      <!-- 3.注册 -->
      <view v-if="authType === 'register'">
        <view class="head-box u-m-b-60">
          <view class="head-title u-m-b-20 single">注册</view>
          <view class="head-subtitle">
            <!-- 请使用本人手机号完成注册 -->
          </view>
        </view>
        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'mobile-sign' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon phone"> </view>
              <!-- <img
                class="title-icon phone"
                src="@/static/images/phone-0.png"
                alt=""
            /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              placeholder="请输入手机号"
              @focus="onFocus($event, 'mobile-sign')"
              @blur="checkValue($event, 'mobile', true)"
              @input="mobileInput($event, 'mobile')"
              :placeholderStyle="placeholderStyle"
              v-model="form['register'].data.mobile"
              type="number"
            ></u-input>
            <!-- <button
              class="u-reset-button code-btn code-btn-start"
              :disabled="!form['register'].data.isMobileEnd"
              :class="{ 'code-btn-end': form['register'].data.isMobileEnd }"
              @tap="getSmsCode('register')"
            >
              {{ codeText }}
            </button> -->
          </view>
          <view class="message-error">{{
            form['register'].error.mobile || ''
          }}</view>
        </view>
        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'password-sign' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon lock"> </view>
              <!-- <img
                class="title-icon lock"
                src="@/static/images/lock-0.png"
                alt=""
            /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              @focus="onFocus($event, 'password-sign')"
              @blur="checkValue($event, 'password', true)"
              @input="checkValue($event, 'password')"
              placeholder="请输入密码"
              :placeholderStyle="placeholderStyle"
              v-model="form['register'].data.password"
              type="password"
            ></u-input>
          </view>
          <view class="message-error">{{
            form['register'].error.password || ''
          }}</view>
        </view>
        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'code-sign' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon mail"> </view>
              <!-- <img
                class="title-icon mail"
                src="@/static/images/mail-0.png"
                alt=""
            /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              @focus="onFocus($event, 'code-sign')"
              @blur="checkValue($event, 'code', true)"
              @input="checkValue($event, 'code')"
              placeholder="请输入验证码"
              :placeholderStyle="placeholderStyle"
              v-model="form['register'].data.code"
              type="number"
            ></u-input>

            <button
              class="u-reset-button code-btn code-btn-start code-btn-new"
              :disabled="!form['register'].data.isMobileEnd"
              :class="{ 'code-btn-end': form['register'].data.isMobileEnd }"
              @tap="getSmsCode('register')"
            >
              {{ codeText }}
            </button>

            <!-- <button
              class="u-reset-button login-btn-start"
              @tap="registerSubmit"
            >
              注册
            </button> -->
          </view>
          <view class="message-error">{{
            form['register'].error.code || ''
          }}</view>
        </view>
        <view class="operate">
          <text class=""> </text>

          <button
            class="u-reset-button operate-btn"
            @tap="showAuthModal('accountLogin')"
          >
            返回登录
          </button>
        </view>

        <button class="u-reset-button login-large" @tap="registerSubmit">
          注册
        </button>

        <!-- <button
          v-if="!isLogin"
          class="u-reset-button type-btn"
          @tap="showAuthModal('accountLogin')"
        >
          返回登录
        </button> -->
      </view>

      <!-- 4.忘记密码 -->
      <view v-if="authType === 'forgotPwd'">
        <view class="head-box u-m-b-60">
          <view class="head-title u-m-b-20 single">忘记密码</view>
          <view class="head-subtitle"
            >为了您的账号安全，修改密码前请先进行安全验证</view
          >
        </view>
        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'mobile-for' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon phone"> </view>
              <!-- <img
                class="title-icon phone"
                src="@/static/images/phone-0.png"
                alt=""
              /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              @focus="onFocus($event, 'mobile-for')"
              @blur="checkValue($event, 'mobile', true)"
              @input="mobileInput($event, 'mobile')"
              :placeholderStyle="placeholderStyle"
              v-model="form['forgotPwd'].data.mobile"
              type="number"
            ></u-input>
            <!-- <button
              class="u-reset-button code-btn code-btn-start"
              :disabled="!form['forgotPwd'].data.isMobileEnd"
              :class="{ 'code-btn-end': form['forgotPwd'].data.isMobileEnd }"
              @tap="getSmsCode('resetpwd')"
            >
              {{ codeText }}
            </button> -->
          </view>
          <view class="message-error">{{
            form['forgotPwd'].error.mobile || ''
          }}</view>
        </view>

        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'code-for' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon mail"> </view>
              <!-- <img
                class="title-icon mail"
                src="@/static/images/mail-0.png"
                alt=""
            /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              @focus="onFocus($event, 'code-for')"
              @blur="checkValue($event, 'code', true)"
              @input="checkValue($event, 'code')"
              placeholder="请输入验证码"
              :placeholderStyle="placeholderStyle"
              v-model="form['forgotPwd'].data.code"
              type="number"
            ></u-input>
            <button
              class="u-reset-button code-btn code-btn-start code-btn-new"
              :disabled="!form['forgotPwd'].data.isMobileEnd"
              :class="{ 'code-btn-end': form['forgotPwd'].data.isMobileEnd }"
              @tap="getSmsCode('resetpwd')"
            >
              {{ codeText }}
            </button>
          </view>
          <view class="message-error">{{
            form['forgotPwd'].error.code || ''
          }}</view>
        </view>

        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'password-for' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon lock"> </view>
              <!-- <img
                class="title-icon lock"
                src="@/static/images/lock-0.png"
                alt=""
            /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              @focus="onFocus($event, 'password-for')"
              @blur="checkValue($event, 'password', true)"
              @input="checkValue($event, 'password')"
              placeholder="请输入密码"
              :placeholderStyle="placeholderStyle"
              v-model="form['forgotPwd'].data.password"
              type="password"
            ></u-input>
            <!-- <button
              class="u-reset-button login-btn-start"
              @tap="forgotPwdSubmit"
            >
              确认
            </button> -->
          </view>

          <view class="message-error">{{
            form['forgotPwd'].error.password || ''
          }}</view>
        </view>
        <view class="operate">
          <text class=""> </text>

          <button
            class="u-reset-button operate-btn"
            @tap="showAuthModal('accountLogin')"
          >
            返回登录
          </button>
        </view>
        <button class="u-reset-button login-large" @tap="forgotPwdSubmit">
          确认
        </button>
        <!-- <button
          v-if="!isLogin"
          class="u-reset-button type-btn"
          @tap="showAuthModal('accountLogin')"
        >
          返回登录
        </button> -->
      </view>

      <!-- 5.绑定手机号 -->
      <view v-if="authType === 'bindMobile'">
        <view class="head-box u-m-b-60">
          <view class="head-title u-m-b-20">绑定手机号</view>
          <view class="head-subtitle">为了您的账号安全，请绑定手机号</view>
        </view>
        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'mobile-bind' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon phone"> </view>
              <!-- <img
                class="title-icon phone"
                src="@/static/images/phone-0.png"
                alt=""
            /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              @focus="onFocus($event, 'mobile-bind')"
              @blur="checkValue($event, 'mobile', true)"
              @input="mobileInput($event, 'mobile')"
              placeholder="请输入手机号"
              :placeholderStyle="placeholderStyle"
              v-model="form['bindMobile'].data.mobile"
              type="number"
            ></u-input>
            <button
              class="u-reset-button code-btn code-btn-start"
              :disabled="!form['bindMobile'].data.isMobileEnd"
              :class="{ 'code-btn-end': form['bindMobile'].data.isMobileEnd }"
              @tap="getSmsCode('changemobile')"
            >
              {{ codeText }}
            </button>
          </view>
          <view class="message-error">{{
            form['bindMobile'].error.mobile || ''
          }}</view>
        </view>
        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'code-bind' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon mail"> </view>
              <!-- <img
                class="title-icon mail"
                src="@/static/images/mail-0.png"
                alt=""
              /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              @focus="onFocus($event, 'code-bind')"
              @blur="checkValue($event, 'code', true)"
              @input="checkValue($event, 'code')"
              placeholder="请输入验证码"
              :placeholderStyle="placeholderStyle"
              v-model="form['bindMobile'].data.code"
              type="number"
            ></u-input>
            <button
              class="u-reset-button login-btn-start"
              @tap="bindMobileSubmit"
            >
              立即绑定
            </button>
          </view>
          <view class="message-error">{{
            form['bindMobile'].error.code || ''
          }}</view>
        </view>
      </view>

      <!-- 6.修改密码 -->
      <view v-if="authType === 'changePwd'">
        <view class="head-box u-m-b-60">
          <view class="head-title u-m-b-20">修改密码</view>
          <view class="head-subtitle"></view>
        </view>
        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'old-bind' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon lock"> </view>
              <!-- <img
                class="title-icon lock"
                src="@/static/images/lock-0.png"
                alt=""
              /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              @focus="onFocus($event, 'old-bind')"
              @blur="checkValue($event, 'oldPassword', true)"
              @input="checkValue($event, 'oldPassword')"
              placeholder="请输入旧密码"
              :placeholderStyle="placeholderStyle"
              v-model="form['changePwd'].data.oldPassword"
              type="password"
            ></u-input>
          </view>
          <view class="message-error">
            {{ form['changePwd'].error.oldPassword || '' }}
          </view>
        </view>
        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'new-bind' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon lock"> </view>
              <!-- <img
                class="title-icon lock"
                src="@/static/images/lock-0.png"
                alt=""
              /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              @focus="onFocus($event, 'new-bind')"
              @blur="checkValue($event, 'newPassword', true)"
              @input="checkValue($event, 'newPassword')"
              placeholder="请输入新密码"
              :placeholderStyle="placeholderStyle"
              v-model="form['changePwd'].data.newPassword"
              type="password"
            ></u-input>
          </view>
          <view class="message-error">
            {{ form['changePwd'].error.newPassword || '' }}
          </view>
        </view>
        <view
          class="form-item u-border-bottom"
          :class="hoverInput == 'reNew' ? 'focus' : ''"
        >
          <view class="item-content u-flex u-col-center">
            <view class="item-title">
              <view class="title-icon lock"> </view>
              <!-- <img
                class="title-icon lock"
                src="@/static/images/lock-0.png"
                alt=""
            /> -->
            </view>
            <u-input
              class="u-m-r-10 u-flex-1"
              @focus="onFocus($event, 'reNew')"
              @blur="checkValue($event, 'reNewPassword', true)"
              @input="checkValue($event, 'reNewPassword')"
              placeholder="再次输入新密码"
              :placeholderStyle="placeholderStyle"
              v-model="form['changePwd'].data.reNewPassword"
              type="password"
            ></u-input>
          </view>
          <view class="message-error">
            {{ form['changePwd'].error.reNewPassword || '' }}
          </view>
        </view>
        <view class="editPwd-btn-box u-m-t-80">
          <button class="u-reset-button save-btn" @tap="changePwdSubmit">
            保存
          </button>
          <button
            class="u-reset-button forgot-btn"
            @tap="showAuthModal('forgotPwd')"
          >
            忘记密码
          </button>
        </view>
      </view>

      <!-- 第三方登录 -->
      <view
        v-if="
          authType === 'accountLogin' ||
          authType === 'smsLogin' ||
          authType === 'register'
        "
        class="auto-login-box u-flex u-row-center u-col-center"
      >
        <view class="other-title"> 其他登录方式 </view>

        <!-- 微信 -->
        <button
          v-if="
            ['App', 'wxOfficialAccount', 'wxMiniProgram'].includes(platform)
          "
          class="u-reset-button wechat-btn"
          open-type="getPhoneNumber"
          @getphonenumber="thirdLogin('wechat', $event)"
          @tap="thirdLogin('wechat')"
        >
          <image
            class="auto-login-img wechat-icon"
            :src="
              $IMG_URL +
              '/uploads/20230427/1412e48d63d35977d5ca2da4f0699413.png'
            "
          ></image>
          一键登陆
        </button>
        <!-- 支付宝 -->
        <!-- <image
					v-if="['App', 'alipayMiniProgram', 'H5'].includes(platform)"
					class="auto-login-img"
					@tap="thirdLogin('alipay')"
					:src="$IMG_URL + '/imgs/auto_login_ali.png'"
					mode=""
				></image> -->
        <!-- 苹果 -->
        <!-- #ifdef APP-PLUS -->
        <image
          v-if="device === 'ios'"
          class="auto-login-img"
          @tap="thirdLogin('apple')"
          :src="$IMG_URL + '/imgs/auto_login_iphone.png'"
        ></image>
        <!-- #endif -->
      </view>

      <!-- 协议 -->
      <view
        v-if="['accountLogin', 'smsLogin', 'register'].includes(authType)"
        class="agreement-box u-flex u-row-center"
      >
        <u-checkbox v-model="protocol" shape="circle" active-color="#a084f0">
          <view class="agreement-text tcp-text u-flex u-col-center">
            我已阅读并遵守
            <view class="tcp-text u-flex u-col-center">
              <view
                @tap.stop="
                  $Router.push({
                    path: '/pages/public/richtext',
                    query: { id: 1, type: 'aite' },
                  })
                "
              >
                《用户协议》
              </view>
              <text> 与 </text>

              <view
                @tap.stop="
                  $Router.push({
                    path: '/pages/public/richtext',
                    query: { id: 1, type: 'aite' },
                  })
                "
              >
                《隐私协议》
              </view>
            </view>
          </view>
        </u-checkbox>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 登录提示页
 */
import FormValidate from '@/shopro/validate/form';
import schema from '@/uview-ui/libs/util/async-validator';
import wechat from '@/shopro/wechat/wechat';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
// #ifdef APP-PLUS
import apple from '@/shopro/apple';
// #endif

export default {
  name: 'shoproAuthModal',
  data() {
    return {
      mainModal: '',
      hoverInput: '',

      platform: this.$platform.get(),
      device: this.$platform.device(),
      form: {
        // 1.账号密码登录
        accountLogin: {
          data: {
            account: '15918727448', // 账号
            password: '123qwe', // 密码
          },
          rules: {
            account: FormValidate.account,
            password: FormValidate.password,
          },
          error: {
            account: '',
            password: '',
          },
        },

        // 2.短信登录
        smsLogin: {
          data: {
            mobile: '', // 手机号
            code: '', // 验证码
            isMobileEnd: false, // 手机号输入完毕
          },
          rules: {
            code: FormValidate.code,
            mobile: FormValidate.mobile,
          },
          error: {
            mobile: '', // 手机号
            code: '', // 验证码
          },
        },
        // 3.注册
        register: {
          data: {
            mobile: '', // 手机号
            code: '', // 验证码
            password: '', // 密码
            isMobileEnd: false, // 手机号输入完毕
          },
          rules: {
            code: FormValidate.code,
            mobile: FormValidate.mobile,
            password: FormValidate.password,
          },
          error: {
            mobile: '', // 手机号
            code: '', // 验证码
            password: '', // 密码
          },
        },

        // 4.忘记密码
        forgotPwd: {
          data: {
            mobile: '', //手机号
            code: '', //验证码
            password: '', //密码
            isMobileEnd: false, // 手机号输入完毕
          },
          rules: {
            mobile: FormValidate.mobile,
            code: FormValidate.code,
            password: FormValidate.password,
          },
          error: {
            mobile: '', //手机号
            code: '', //验证码
            password: '', //密码
          },
        },
        // 5.绑定手机号
        bindMobile: {
          data: {
            mobile: '', //手机号
            code: '', //验证码
            isMobileEnd: false, // 手机号输入完毕
          },
          rules: {
            code: FormValidate.code,
            mobile: FormValidate.mobile,
          },
          error: {
            mobile: '', //手机号
            code: '', //验证码
          },
        },
        // 6.修改密码
        changePwd: {
          data: {
            oldPassword: '', //旧密码
            newPassword: '', //新密码
            reNewPassword: '', //确认密码
          },
          rules: {
            oldPassword: FormValidate.password,
            newPassword: FormValidate.password,
            reNewPassword: [
              {
                required: true,
                message: '请重新输入密码',
                trigger: ['change', 'blur'],
              },
              {
                validator: (rule, value, callback) => {
                  return value === this.form.changePwd.data.newPassword;
                },
                message: '两次输入的密码不一致',
                trigger: ['change', 'blur'],
              },
            ],
          },
          error: {
            oldPassword: '', //旧密码
            newPassword: '', //新密码
            reNewPassword: '', //确认密码
          },
        },
      },
      codeText: '点击获取',
      disabledCode: false,
      protocol: false, //是否同意隐私协议
      placeholderStyle: 'font-size: 30rpx; font-weight: 500;color:#C2C7CF;',
    };
  },

  computed: {
    ...mapGetters([
      'initShop',
      'isLogin',
      'authType',
      'globalAuthToast',
      'showMainAuth',
    ]),
    showAuth: {
      get() {
        return !!this.authType;
      },
      set(value) {
        value ? uni.hideTabBar() : uni.showTabBar();
      },
    },
    showInAuth: {
      get() {
        return !!this.showMainAuth;
      },
      set(value) {},
    },
  },
  watch: {
    showAuth(val) {
      if (val && !this.globalAuthToast) {
        this.changeGlAuth({
          status: true,
          success: () => {
            uni.showModal({
              title: '温馨提示',
              content: '您还未登录，暂无访问权限，是否登录?',
              cancelText: '取消',
              confirmText: '立即登录',
              success: (res) => {
                if (res.confirm) {
                  this.changeMainAuth(this.showAuth);
                } else {
                  this.closeAuthModal();
                }
                this.changeGlAuth();
              },
            });
          },
        });
      } else {
        this.changeGlAuth();
      }
    },
  },
  mounted() {},
  methods: {
    ...mapActions([
      'getUserInfo',
      'showAuthModal',
      'changeGlAuth',
      'changeMainAuth',
    ]),

    onFocus(ev, name) {
      this.hoverInput = name;
    },

    // 检测
    checkValue(e, key, blur = false) {
      this.validation(key);
      if (blur) {
        this.hoverInput = '';
      }
    },

    // 校验数据
    validation(key, callback = () => {}) {
      let that = this;
      //拿到需要校验的数据
      let fieldValue = this.form[this.authType].data[key];
      //拿到需要检验的规则
      let rules = this.form[this.authType].rules[key];
      // 判空
      if (!rules || rules.length === 0) {
        return callback('');
      }
      // 设置当前的装填，标识为校验中
      let validateState = 'validating';
      // 调用async-validator的方法
      let validator = new schema({
        [key]: rules,
      });
      // 校验
      validator.validate(
        {
          [key]: fieldValue,
        },
        {
          firstFields: true,
        },
        (errors, fields) => {
          // 记录状态和报错信息
          validateState = !errors ? 'success' : 'error';
          let validateMessage = errors ? errors[0].message : '';
          that.form[that.authType].error[key] = validateMessage;
          callback(validateMessage);
        }
      );
    },

    // 校验全部数据
    validateAll(callback) {
      let that = this;
      return new Promise((resolve) => {
        // 对当前所有表单检验
        let valid = true; // 默认通过
        let count = 0; // 用于标记是否检查完毕
        let errorArr = []; // 存放错误信息
        let curFormData = that.form[that.authType].data;
        Object.keys(curFormData).map((field) => {
          that.validation(field, (error) => {
            // 如果回调有error
            if (error) {
              valid = false;
              errorArr.push(error);
            }
            if (++count === Object.keys(curFormData).length) {
              resolve(valid);
              if (errorArr.length) {
                this.$u.toast(errorArr[0]);
              }
              if (typeof callback == 'function') callback(valid);
            }
          });
        });
      });
    },

    // 手机号是否输入完毕
    mobileInput(e, key) {
      this.form[this.authType].data.isMobileEnd = this.$u.test.mobile(
        this.form[this.authType].data.mobile
      );
      this.validation(key);
    },

    closeAuthModal() {
      this.$store.dispatch('showAuthModal', '');
      this.$store.dispatch('changeMainAuth', '');
    },

    // 获取短信验证码
    getSmsCode(type) {
      const that = this;
      if (that.form[this.authType].data.isMobileEnd && !that.disabledCode) {
        that
          .$http(
            'v1.smsSend',
            {
              mobile: that.form[this.authType].data.mobile,
              event: type,
            },
            '获取验证码中...'
          )
          .then((res) => {
            if (res.code === 1) {
              that.codeChange();
              that.$u.toast('验证码已发送，请注意查收短信');
            } else {
              that.$u.toast(res.msg);
            }
          });
      } else {
        that.$u.toast('请稍后再试');
      }
    },

    // 倒计时
    codeChange() {
      if (this.disabledCode) return;
      this.disabledCode = true;
      let n = 60;
      this.codeText = n + 's';
      const run = setInterval(() => {
        n -= 1;
        if (n < 0) {
          clearInterval(run);
        }
        this.codeText = n + 's';
        if (this.codeText < 0 + 's') {
          this.disabledCode = false;
          this.codeText = '重新获取';
        }
      }, 1000);
    },

    // 规则校验
    validateSubmit() {
      if (
        ['accountLogin', 'smsLogin', 'register'].includes(this.authType) &&
        !this.protocol
      ) {
        this.$u.toast('请同意用户协议');
        return false;
      }
      return this.validateAll();
    },

    // 第三方登录
    async thirdLogin(provider, payload = null) {
      if (this.platform === 'wxMiniProgram' && payload === null) return;
      if (!this.protocol) {
        this.$u.toast('请同意用户协议');
        return false;
      }
      const that = this;
      let token = '';
      switch (provider) {
        case 'wechat':
          token = await wechat.login(payload);
          break;
        case 'alipay':
          break;
        case 'apple':
          token = await apple.appleIdOauth();
          break;
        default:
          break;
      }
      if (token) {
        that.closeAuthModal();
        that.getUserInfo(token);
      }
    },

    // 1.账号登录
    async accountLoginSubmit() {
      let that = this;
      (await that.validateSubmit()) &&
        that
          .$http(
            'v1.userLogin',
            {
              account: that.form['accountLogin'].data.account,
              password: that.form['accountLogin'].data.password,
            },
            '登录中...'
          )
          .then((res) => {
			   console.log(res,111);
			      console.log(res.code,222); 
            if (res.code === 1) {
              that.closeAuthModal();
              that.getUserInfo(res.data.token);
              that.$u.toast(res.msg);
            }
          });
    },

    // 2.短信登录
    async smsLoginSubmit() {
      let that = this;
      (await that.validateSubmit()) &&
        that
          .$http(
            'v1.smsLogin',
            {
              mobile: that.form['smsLogin'].data.mobile,
              code: that.form['smsLogin'].data.code,
            },
            '登录中...'
          )
          .then((res) => {
            if (res.code === 1) {
              that.closeAuthModal();
              that.getUserInfo(res.data.token);
              that.$u.toast(res.msg);
            }
          });
    },

    // 3.注册
    async registerSubmit() {
      let that = this;
      (await that.validateSubmit()) &&
        that
          .$http(
            'user.register',
            {
              mobile: that.form['register'].data.mobile,
              code: that.form['register'].data.code,
              password: that.form['register'].data.password,
            },
            '注册中...'
          )
          .then((res) => {
            if (res.code === 1) {
              that.$u.toast(res.msg);
              that.closeAuthModal();
              that.getUserInfo(res.data.token);
            }
          });
    },

    // 4.忘记密码
    async forgotPwdSubmit() {
      let that = this;
      (await that.validateSubmit()) &&
        that
          .$http(
            'user.forgotPwd',
            {
              mobile: that.form['forgotPwd'].data.mobile,
              code: that.form['forgotPwd'].data.code,
              password: that.form['forgotPwd'].data.password,
            },
            '修改中...'
          )
          .then((res) => {
            if (res.code === 1) {
              that.$u.toast(res.msg);
              if (that.isLogin) {
                that.closeAuthModal();
              } else {
                that.showAuthModal('accountLogin');
              }
            }
          });
    },

    // 5.绑定手机
    async bindMobileSubmit() {
      let that = this;
      (await that.validateSubmit()) &&
        that
          .$http(
            'user.bindMobile',
            {
              mobile: that.form['bindMobile'].data.mobile,
              code: that.form['bindMobile'].data.code,
              password: that.form['bindMobile'].data.password,
            },
            '绑定中...'
          )
          .then((res) => {
            if (res.code === 1) {
              that.$u.toast(res.msg);
              that.closeAuthModal();
              that.getUserInfo();
            }
          });
    },

    // 6.修改密码
    async changePwdSubmit() {
      let that = this;
      (await that.validateSubmit()) &&
        that
          .$http(
            'user.changePwd',
            {
              oldpassword: that.form['changePwd'].data.oldPassword,
              newpassword: that.form['changePwd'].data.newPassword,
            },
            '修改中...'
          )
          .then((res) => {
            if (res.code === 1) {
              that.closeAuthModal();
              that.$u.toast(res.msg);
              that.getUserInfo(res.data.userinfo.token);
            }
          });
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes title-animation {
  0% {
    font-size: 26rpx;
  }

  100% {
    font-size: 30rpx;
  }
}

.form-wrap {
  .form-item {
    display: flex;
    flex-direction: column;
    font-size: 28rpx;
    padding: 20rpx 0;
    color: $u-main-color;
    box-sizing: border-box;
    line-height: $u-form-item-height;
    width: 100%;
    &.focus {
      .item-title {
        overflow: hidden;
      }
      .title-icon {
        // transform: translateY(-50rpx);
        // filter: drop-shadow(0 50rpx 0rpx rgba(160, 132, 240, 1));
        background: rgba(160, 132, 240, 1) !important;
      }
      &::after {
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        border-bottom-color: rgba(160, 132, 240, 1);
      }
    }
    .item-title {
      position: relative;
      max-width: none;
      view,
      image {
        max-width: none;
      }
      width: 110rpx;
      min-height: 50rpx;
      font-size: 30rpx;
      color: #333;
      font-weight: 600;
      text-align: left;
      .title-icon {
        background: rgba(158, 158, 158, 1);
      }
      .title-icon.lock {
        position: absolute;
        top: calc(50% - 22rpx);
        left: 16rpx;
        width: 43rpx;
        height: 44rpx;
        -webkit-mask-box-image: url($IMG_URL + '/uploads/20230511/e49ff2fc5222d0b9030c00178bc7f876.png');
      }
      .title-icon.mail {
        -webkit-mask-box-image: url($IMG_URL + '/uploads/20230511/00836cca5f6626096970547f74c955e2.png');
      }
      .title-icon.mail,
      .title-icon.phone {
        position: absolute;
        top: calc(50% - 25rpx);
        left: 10rpx;
        width: 50rpx;
        height: 50rpx;
      }
      .title-icon.phone {
        -webkit-mask-box-image: url($IMG_URL + '/uploads/20230511/9326a18faef6306baa40cbc10bb6afd1.png');
      }
    }

    .message-error {
      text-align: left;
      font-size: 24rpx;
      line-height: 24rpx;
      color: $u-type-error;
      margin-top: 12rpx;
      margin-left: 120rpx;
    }
  }
}

.login-wrap {
  padding: 30rpx 34rpx 50rpx;
  min-height: 700rpx;
  background-color: #fff;

  .head-box {
    .head-title {
      position: relative;
      min-width: 160rpx;
      // font-size: 26rpx;
      // font-weight: 600;
      // color: #3d3d3d;
      // line-height: 42rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
      line-height: 30rpx;
      // border-bottom: 2rpx solid #a084f0;
      &.single {
        &::after {
          background-color: transparent;
        }
      }

      &::after {
        content: '';
        position: absolute;
        left: calc(50% - 50rpx);
        margin: 4rpx auto 0;
        display: block;
        width: 100rpx;
        height: 4rpx;
        border-radius: 2rpx;
        background-color: #a084f0;
      }
    }

    .head-title-active {
      width: 160rpx;
      font-size: 26rpx;
      font-weight: 600;
      color: #999;
      line-height: 42rpx;
    }

    .head-title-animation {
      animation-name: title-animation;
      animation-duration: 0.1s;
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
    }

    .head-title-line {
      position: relative;

      &::before {
        content: '';
        width: 1rpx;
        height: 34rpx;
        background-color: #e4e7ed;
        position: absolute;
        left: 0rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .head-subtitle {
      font-size: 26rpx;
      font-weight: 400;
      color: #c2c7cf;
      text-align: left;
      display: flex;
    }
  }

  .code-btn[disabled] {
    background-color: #fff;
  }

  .code-btn-start.code-btn-new {
    width: 200rpx;
    background: #a084f0;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    color: #fff;
    border: 1rpx solid #a084f0;
    opacity: 1;
    box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
  }
  .code-btn-start {
    width: 160rpx;
    line-height: 56rpx;
    border: 1rpx solid #e9b766;
    border-radius: 28rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #e9b766;
    opacity: 0.5;
  }

  .forgot-btn {
    width: 160rpx;
    line-height: 56rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #999;
  }

  .code-btn-end {
    opacity: 1 !important;
  }

  .login-btn-start {
    width: 158rpx;
    line-height: 56rpx;
    background: linear-gradient(90deg, #e9b461, #eecc89);
    border-radius: 28rpx;
    font-size: 26rpx;
    font-weight: 500;
    color: #ffffff;
  }

  .type-btn {
    padding: 20rpx;
    margin: 40rpx auto;
    width: 200rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #999999;
  }

  .auto-login-box {
    position: relative;
    padding-top: 130rpx;
    width: 100%;

    .auto-login-img.wechat-icon {
      margin: 0 0;
    }
    .auto-login-img {
      width: 68rpx;
      height: 68rpx;
      border-radius: 50%;
      margin: 0 30rpx;
    }
  }

  .agreement-box {
    margin: 80rpx auto 0;

    .protocol-check {
      transform: scale(0.7);
    }

    .agreement-text {
      font-size: 26rpx;
      font-weight: 500;
      color: #999999;
      text {
        color: #999999;
      }
      .tcp-text {
        color: #a084f0;
      }
    }
  }
}

// 修改密码
.editPwd-btn-box {
  .save-btn {
    width: 690rpx;
    line-height: 70rpx;
    background: linear-gradient(90deg, #e9b461, #eecc89);
    border-radius: 35rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
  }

  .forgot-btn {
    width: 690rpx;
    line-height: 70rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
  }
}

.operate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  height: 60rpx;
  // border: 1rpx solid #000;
  .operate-btn {
    font-size: 20rpx;
    font-weight: 400;
    color: #9e9e9e;
  }
}
.login-large {
  margin-top: 80rpx;
  width: 640rpx;
  height: 88rpx;
  background: #a084f0;
  border-radius: 168rpx 168rpx 168rpx 168rpx;
  line-height: 88rpx;
  font-size: 26rpx;
  font-weight: 500;
  color: #ffffff;
}
.other-title {
  position: absolute;
  top: 80rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20rpx;
  font-weight: 400;
  color: #9e9e9e;
}

.wechat-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 342rpx;
  height: 88rpx;
  background: #50b674;
  border-radius: 168rpx 168rpx 168rpx 168rpx;

  font-size: 30rpx;
  font-weight: 400;
  color: #ffffff;
}
</style>
